<div class="pageContent">
      <div id="toolbar1" class="btn-group mr1" role="group" aria-label="Basic example">
         <button type="button" class="btn btn-success" onclick="process_list_adds()" title="添加"><i class="glyphicon glyphicon-plus"></i></button>
         <button type="button" class="btn btn-violet"  onclick="saveTable1(row,processId)"><i class="glyphicon glyphicon-disk"></i></button>
      </div>
    <table id="ProcessTable1" class="col-xs-8 col-md-6 grid"></table>
</div>
<script>
   var  processId;
   var flag;
$(function () {
        flag = false;
        processId="{{id}}";
        row =[];
        var oTable1 = new TableInit1();
        oTable1.Init();

        var fixHelperModified = function(e, tr) {
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function(index) {
            $(this).width($originals.eq(index).width())
        });
        return $helper;
        },
  
        updateIndex = function(e, ui) {
          flag = true ;
            row.splice(0);   //清空数组
            var i = 1;
              $(ui.item.parent()).find("tr").each(function(){
                    var  aa={}; 
                    aa.sort=i++;
                    // aa.sort =$(this).children().eq(0).text();
                    aa.id=$(this).children().eq(0).text();
                    aa.name=$(this).children().eq(1).text();
                    aa.demo=$(this).children().eq(2).text();
                    aa.createDate=$(this).children().eq(3).text();
                    aa.parameter=$(this).children().eq(4).text(); //此处取的是移动后被截取显示的50字符串部分
                    row.push(aa);
              })
              $('td.index', ui.item.parent()).each(function(i){
                    $(this).html(i + 1);
                  });
        };

        $("#ProcessTable1 tbody").sortable({
            helper: fixHelperModified,
            stop: updateIndex
        }).disableSelection();
})

var editflag = false;
var editFlag = false;
var TableInit1 = function () {
    var oTableInit1 = new Object();
    //初始化Table
    oTableInit1.Init = function () {
        $('#ProcessTable1').bootstrapTable({
            url: '/process/processList',         //请求后台的URL（*）
            method: 'post',                      //请求方式（*）
            toolbar: '#toolbar1',                //工具增删改按钮用哪个容器
            toolbarAlign:'left',
            // searchAlign:'left',
            buttonsAlign:'left',
            striped: false,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: false,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit1.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            // search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，没意义
            contentType: "application/x-www-form-urlencoded",
            // strictSearch: true,                 //启用严格搜索
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 700,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "no",                     //每一行的唯一标识，一般为主键列
            //showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            //showHeader:true,
            //showPaginationSwitch:true,
            buttonsToolba:'#buttons-toolbar', 
            columns: [
            {
                field: 'sort',
                title: '序号',
                sortable:true,
                formatter:xuhao
            },
            {
                field: 'id',
                title: 'id',
                visible:false
            },
            {
                field: 'name',
                title: '工序名称'
            },
            {
                field: 'demo',
                title: '文件名'
            },
            {
                field: 'createDate',
                title: '更新时间'
            },
            {
                field: 'parameter',
                title: '参数',
                formatter:paramsMatter,
                width:500,
                align:'left'
            },
            {
                field: 'processSchemeId',
                title: '工序id',
                visible:false
            },
            {
                field: 'operate',
                title: '操作',
                formatter: operateFormatter1 //自定义方法，添加操作按钮
            },
            ],
            onClickCell:function(field,value,row,$element,event){
            if (field == "operate") {
             var  idLocation = $($element[0]).find("a:first").attr("id");    //按钮id
             var serial = $($element[0]).parent().find("td:first").text(); //序号参数
             var eventId = parseInt(idLocation)+1;  //自己添加的id
             var eventIdLocation = parseInt(idLocation); 
                 if (editflag ==false) {
                        flag = true
                        var idData ;
                        var id =row.id;
                        var data= $("#ProcessTable1").bootstrapTable('getData');
                        for(var i=0;i<data.length;i++){
                              if(id==data[i].id){
                                  idData =data[i];    //源数据传到编辑页面
                                  if (data[i].parameter) {
                                      data[i].parameter= data[i].parameter.replace(/\r\n/g, 'br').replace(/\n/g, '<br/>').replace(/\s/g, ' ');//先转化下换行符到br
                                  }
                              }
                        }
                        if(serial ==eventId){  //刚添加完没有id的 还要根据serial定位
                             if (data[eventIdLocation].parameter) {
                              data[eventIdLocation].parameter= data[eventIdLocation].parameter.replace(/\r\n/g, 'br').replace(/\n/g, '<br/>').replace(/\s/g, ' ');//先转化下换行符到br
                            idData =data[eventIdLocation]; 
                            }
                        }
                        idData.schemeId = processId;
                        idData.serial=serial;
                        editFlag = true;
                        Ewin.dialog({
                          id:'editProcessModal',
                          url:'/process/processList/edit',
                          title:'编辑工序',
                          width:800,
                          height:600,
                          data:idData
                      })
                }
            }else{ //展开栏
                    if ($element[0].style.width=="500px") {             //点击展开多行
                          if(value){
                          var ss = value.replace(/br/g, '\r\n').replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ');
                          // console.log(ss);                           //换行后数据
                          $element.css('width','501px');
                          $element.html(ss);
                          return false;
                          }
                    }else if($element[0].style.width=="501px") {
                        if(value){
                              ss =  value.replace(/br/g, '\r\n'); //转换传过来的一条数据
                              var cellData = ss.substring(0,50)+"...";    
                              $element.css('width','500px'); //还原
                              $element.html(cellData);                        //截取50后数据显示，编辑需要传原数据
                              return false;
                          }
                    }
            }
            },
            onReorderRowsDrag: function (table, row) {
               //取索引号
               dragbeforeidx = $(row).attr("data-index");
            },
            onReorderRowsDrop: function (table, row) {
               //取索引号
               draglateridx = $(row).attr("data-index");
            },
             onReorderRow: function (newData) {
                 $.each(newData,function(i,item){
                })
            }
        });
    };
    //得到查询的参数
    oTableInit1.queryParams = function (params) {
        var process = {}; //不需要分页功能
        process.id = "{{id}}"; 
        // var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
        //    pageSize: params.limit,   //页面大小
        //    pageCurrent:params.offset,  //页码
        // };
       // return $.extend({},process);
       return process;
    };
    return oTableInit1;
};


function xuhao(value, row, index) {//赋予的参数
    if(row.sort){   //刚保存过的存在sort
          return [
            '<a class="btn active"  >'+row.sort+'</a>' 
        ].join('');
    }else{
          return [
            '<a class="btn active"  >'+(index+1)+'</a>' 
        ].join('');  
    }
}

function process_list_adds(){
  flag = true ;
  var s = $("#ProcessTable1").bootstrapTable('getData'); //加sort
  var sort = s.length+1;
    Ewin.dialog({
        id:'addProcessModal',
        url:'/process/processList/add',
        title:'添加工序',
        width:600,
        height:200,
        data:{"schemeId":processId,"sort":sort}
    })
}

function operateFormatter1(value, row, index) {//赋予的参数
    return [
        '<div class="buttonGroup"><a class="btn active editButton"  id="'+index+'"  title="编辑工序" ><i class="glyphicon glyphicon-edit"></i>编辑</a><a class="btn active delButton"  onclick="processDelete(event,\''+row.id+'\')" title="删除工序"><i class="glyphicon glyphicon-remove" ></i>删除</a></div>'   
      ].join('');
}

function paramsMatter(value,row,index){
        var values= row.parameter;
        var ss = values;//用于截取后显示
        if (values) {
            if(values.length>50){
            //转换格式
            ss  = values.substring(0,50)+"...";
           }
        return ss;
        }
}

function  processDelete(event,id){
     flag = true ;
     editflag = true ;//删除情况下 
     var editOnce = setTimeout(function(){  //两秒后editflag重新变为false
        editflag = false ;
        clearTimeout(editOnce);
      },2000);
   
    var data = $("#ProcessTable1").bootstrapTable('getData');
    for(var i=0;i<data.length;i++){
           if(id==data[i].id){
             data.splice(i,1);
             continue;
           }
     }
     $(event.target).parent().parent().parent().remove();
} 

function saveTable1(row,processId){ 
  // console.log(flag);
   if (flag==true) {
        flag = false ;//点击提交表格数据
        var s = $("#ProcessTable1").bootstrapTable('getData'); //加sort
        for(var i=0;i<s.length;i++){
            if (s[i].parameter) {
                s[i].parameter  = s[i].parameter.replace(/br/g, '\r\n');
            }
        }
        for(var i=0;i<row.length;i++){
            if (row[i].parameter) {
                row[i].parameter  = row[i].parameter.replace(/br/g, '\r\n');
            }
        }

        if(row.length==0){     //不移动不存在
            $.post("/process/saveProcessList",
                  {schemeId:processId, processList: JSON.stringify(s)},//将整张表数据Post，当然，先序列化成Json
                  function(data) {
                      if (data.statusCode == 200) {
                          toastr.success(data.message+'!');
                          $("#ProcessTable1").bootstrapTable('refresh',{url:"/process/processList",silent:true,query:{type:1,level:2}});
                      }
            });
        }else{                 //移动时存在
            if(s.length==row.length){    
                  for(var i=0;i<s.length;i++){            //移动后由于再列表加载显示一遍变成50字符，需要将原来的parameter参数替换
                      for(var j=0;j<row.length;j++){
                          row[j].processSchemeId =s[i].processSchemeId
                                if (!s[i].parameter=="") {
                                     if(s[i].name==row[j].name){
                                          if (s[i].parameter) {
                                            row[j].parameter =s[i].parameter
                                          }
                                     }
                                }
                      }
                  }
                  if(editFlag==true){    //识别编辑操作的标识符       
                      editFlag = false;  //移动时和移动后编辑
                      $.post("/process/saveProcessList",
                        {schemeId:processId, processList: JSON.stringify(s)},//将整张表数据Post，当然，先序列化成Json
                        function(data) {
                            if (data.statusCode == 200) {
                                toastr.success(data.message+'!');
                                $("#ProcessTable1").bootstrapTable('refresh',{url:"/process/processList",silent:true,query:{type:1,level:2}});
                            }
                      });
                 }else{
                      $.post("/process/saveProcessList",
                        {schemeId:processId, processList: JSON.stringify(row)},//将整张表数据Post，当然，先序列化成Json
                        function(data) {
                            if (data.statusCode == 200) {
                                toastr.success(data.message+'!');
                                $("#ProcessTable1").bootstrapTable('refresh',{url:"/process/processList",silent:true,query:{
                                    type:1,
                                    level:2
                                }});
                            }
                      });
              }
          }else{ //不一样说明执行了删除操作，专门处理删除操作    //移动时存在
              $.post("/process/saveProcessList",
              {schemeId:processId, processList: JSON.stringify(s)},//将整张表数据Post，当然，先序列化成Json
              function(data) {
                  if (data.statusCode == 200) {
                      toastr.success(data.message+'!');
                      $("#ProcessTable1").bootstrapTable('refresh',{url:"/process/processList",silent:true,query:{type:1,level:2}});
                  }
              });
          }
      }
    $("div.flowChart").empty();
  }else{
        toastr.success("保存成功！"); //手动添加提醒
        return false;
 }
}
</script>